<template>
  <div>
    <div class="card-header">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        style="min-width: 700px"
        @select="handleSelect"
      >
        <el-menu-item index="0">事件信息</el-menu-item>
        <el-menu-item index="1">统计图</el-menu-item>
        <el-menu-item index="2">热力图</el-menu-item>
      </el-menu>
    </div>
    <!-- 这是事件信息表 -->
    <div class="operation-table" v-show="activeIndex === '0'">
      <el-table
        :data="paginatedData"
        style="width: 100%; font-size: 12px"
        height="250"
        :row-style="{ height: '40px' }"
      >
        <el-table-column prop="number" label="事件编号" min-width="120" />
        <el-table-column prop="type" label="事件类型" />
        <el-table-column prop="grade" label="事件等级" />
        <el-table-column prop="time" label="发生时间" />
        <el-table-column prop="address" label="发生地点" />
        <el-table-column prop="plate" label="车牌号" />
        <el-table-column prop="driver" label="驾驶员" />
        <el-table-column prop="status" label="处理状态" />
      </el-table>
      <div class="example-pagination-block">
        <el-pagination
          v-model:current-page="internalCurrentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          style="margin-top: 20px"
        />
      </div>
    </div>
    <!-- 这是事件信息统计图 -->
    <div v-show="activeIndex === '1'" class="operation-pie">
      <v-chart :option="option1"></v-chart>
      <v-chart :option="option2"></v-chart>
    </div>
    <!-- 热力图按钮 -->
    <div v-show="activeIndex === '2'" class="operation-heat">
      <div class="heat-switch">
        <span>设置热力图：</span>
        <el-switch v-model="isHeatMap" />
      </div>
      <el-divider />
      <div class="slider-demo-block">
        <span>热点半径(Radius Size):</span>
        <el-slider v-model.number="radiusSize" />
      </div>
      <div class="slider-demo-block">
        <span>模糊尺寸(Blur Size):</span>
        <el-slider v-model.number="blurSize" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const activeIndex = ref('0');

const tableData = ref([]);

//接受父组件传来的数据
const props = defineProps({
  insideCircle: {
    type: Array,
    default: () => [],
  },
});

const statusTranform = (value) => {
  if (value === '2') {
    return '已处理';
  }
  if (value === '1') {
    return '处理中';
  } else {
    return '未处理';
  }
};

// 分页相关状态
const pageSize = ref(5);
const internalCurrentPage = ref(1);
const total = computed(() => tableData.value.length);

// 分页数据计算
const paginatedData = computed(() => {
  const start = (internalCurrentPage.value - 1) * pageSize.value;
  return tableData.value.slice(start, start + pageSize.value);
});

//根据事件类型统计事件数量
const eventTyoeCount = computed(() => {
  const count = {
    碰撞: 0,
    刮擦: 0,
    碾压: 0,
    翻车: 0,
    失火: 0,
    其他: 0,
  };
  tableData.value.forEach((item) => {
    if (item.type === '刮蹭') {
      count.刮擦 += 1; //把刮蹭类型归为刮擦
    } else if (count.hasOwnProperty(item.type)) {
      count[item.type] += 1;
    } else {
      count.其他 += 1;
    }
  });
  const arr = [
    { value: count.碰撞, name: '碰撞' },
    { value: count.刮擦, name: '刮擦' },
    { value: count.碾压, name: '碾压' },
    { value: count.翻车, name: '翻车' },
    { value: count.失火, name: '失火' },
    { value: count.其他, name: '其他' },
  ];
  return arr;
});

//统计事件等级
const eventGradeCount = computed(() => {
  const count = {
    轻微事故: 0,
    一般事故: 0,
    特大事故: 0,
    重大事故: 0,
  };
  tableData.value.forEach((item) => {
    if (item.grade === 1 || item.grade === '1') {
      count.轻微事故 += 1;
    } else if (item.grade === 2 || item.grade === '2') {
      count.一般事故 += 1;
      count[item.grade] += 1;
    } else if (item.grade === 3 || item.grade === '3') {
      count.特大事故 += 1;
      count[item.grade] += 1;
    } else if (item.grade === 4 || item.grade === '4') {
      count.重大事故 += 1;
      count[item.grade] += 1;
    }
  });
  const arr = [
    { value: count.轻微事故, name: '轻微事故' },
    { value: count.一般事故, name: '一般事故' },
    { value: count.特大事故, name: '特大事故' },
    { value: count.重大事故, name: '重大事故' },
  ];
  return arr;
});

const showPie = (txt, data) => {
  return {
    title: {
      text: txt,
      textStyle: {
        fontSize: 14,
      },
      left: 'left',
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      left: '0',
      right: '0',
      bottom: '0',
      top: '0',
    },
    legend: {
      orient: 'vertical',
      left: 'right',
      //缩小
      itemWidth: 20,
      itemHeight: 10,
      //字体
      textStyle: {
        fontSize: 10,
      },
    },
    series: [
      {
        type: 'pie',
        radius: '50%',
        data: data,
        //中心点
        center: ['40%', '60%'],
        label: {
          formatter: '{b} | {c} ',
          fontSize: 10,
          //线条长度
        },
        labelLine: {
          length: 10,
          length2: 10,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 6,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };
};

// 事件信息统计图
const option1 = ref();

const option2 = ref();

// 热力图
const isHeatMap = ref(false);
const radiusSize = ref(10);
const blurSize = ref(15);

const emit = defineEmits(['changeHeatMap']);

//监听上三个值的范围
watch(
  [isHeatMap, radiusSize, blurSize],
  ([newIsHeatMap, newRadiusSize, newBlurSize]) => {
    emit('changeHeatMap', newIsHeatMap, newRadiusSize, newBlurSize);
  },
  { deep: true, immediate: true }
);

const handleSelect = (key) => {
  activeIndex.value = key;
  //事件类型统计图
  option1.value = showPie('事件类型统计图', eventTyoeCount.value);
  //事件等级统计图
  option2.value = showPie('事件等级统计图', eventGradeCount.value);

  if (key === '2') {
    // 主动触发一次热力图状态更新
    emit('changeHeatMap', isHeatMap.value, radiusSize.value, blurSize.value);
  }
};

// 监听 insideCircle 变化并同步到本地 tableData
watch(
  () => props.insideCircle,
  (newVal) => {
    tableData.value = newVal.map((item) => {
      const properties = item.getProperties().values_;
      return {
        number: properties.number || properties.事件编号,
        type: properties.type || properties.事件类型,
        grade: properties.grade || properties.事件等级,
        time: properties.time || properties.发生时间,
        address: properties.address || properties.发生地点,
        plate: properties.plate || properties.车牌号,
        driver: properties.driver || properties.驾驶员,
        status: properties.status || statusTranform(properties.处理状态),
      };
    });
  },
  { immediate: true, deep: true }
);
</script>

<style lang="scss" scoped>
.el-menu--horizontal.el-menu {
  margin-bottom: 20px;
  height: 40px;
}

.operation-table {
  overflow-x: auto;
  min-width: 700px;

  :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
}

:deep(.el-table td) {
  .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.operation-table {
  overflow-x: auto;
  min-width: 700px;

  :deep(.el-table__body-wrapper) {
    overflow-x: auto;
  }
  :deep(.el-table) {
    min-width: 1000px; // 根据列总宽度调整
  }
}

.operation-pie {
  display: flex;
  justify-content: space-between;
  .echarts {
    height: 250px;
    width: 350px;
  }
}

.operation-heat {
  .heat-switch {
    display: flex;
    align-items: center;
  }
  .el-divider {
    width: 50%;
    margin: 10px 0 20px 0;
  }
  .slider-demo-block {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    span {
      font-size: 14px;
    }
    .el-slider {
      width: 150px;
      margin-left: 10px;
    }
  }
}
</style>
